<template>
  <div class="swiper">
    <div class="swiper-container swiper1" style="width:377px;height:200px;">
      <div class="swiper-wrapper" width="100%">
        <!-- <div class="swiper-slide" v-for="(item, key) in swiperList" :key="key">
          <img :src="item.img" alt width="100%" />
        </div>-->
        <div class="swiper-slide" style="width:100%;">
          <div style="height:200px;overflow:hidden">
            <img src="../assets/image/医院轮播1.jpg" alt width="100%" />
          </div>
        </div>
        <div class="swiper-slide">
          <div style="height:200px;overflow:hidden">
            <img src="../assets/image/医院轮播2.jpg" alt width="100%" /> 1111
          </div>
        </div>
        <div class="swiper-slide">
          <div style="height:200px;overflow:hidden">
            <img src="../assets/image/医院轮播3.jpg" alt style="width:100%;display:block" />
          </div>
        </div>
      </div>
    </div>
    <!-- <swiper :options="swiperOption" v-if="swiperList.length" style="width:250px;height:300px">
      <swiper-slide
        class="my-swp-silde"
        v-for="(slide, key) in swiperList"
        :key="key"
        data-id="slide.id"
        style="width:100%"
      >
        <img class="my-swp-img" :src="slide.img" alt />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>-->
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";

export default {
  data() {
    return {
      swiperList: [
        {
          img: "../assets/image/医院轮播1.jpg",
          id: 1,
        },
        {
          img: "../assets/image/医院轮播2.jpeg",
          id: 2,
        },
        {
          img: "https://img01.hua.com/uploadpic/newpic/201709011117442888.jpg",
          id: 3,
        },
      ],
    };
  },
  mounted() {
    var mySwiper = new Swiper(".swiper1", {
      autoplay: 2500,
      speed: 300,
      loop: true,
      onClick: function (swiper) {
        // alert("你点了Swiper");
      },
    });
  },
};
</script>

<style lang="less" scoped>
.swiper1 {
  width: 100%;
}
span {
  display: block;
  background-color: #00e;
}
.swiper-slide {
  img {
    padding-bottom: 20px;
  }
}
</style>